<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="10">
                <el-button type="success" @click="openAddRole">新增角色</el-button>
            </el-col>
        </el-row>
        <hr/>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column type="index" label="NO" width="50"></el-table-column>
            <el-table-column prop="code" label="角色编码"></el-table-column>
            <el-table-column prop="roleName" label="角色名称"></el-table-column>
            <el-table-column prop="descpt" label="角色描述"></el-table-column>
            <el-table-column prop="insertTime" label="添加时间"></el-table-column>
            <el-table-column prop="updateTime" label="更新时间"></el-table-column>
            <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                    <el-button @click="editor(scope.row)" type="primary" icon="el-icon-edit" size="small"></el-button>
                    <el-button @click="del(scope.row)" type="danger" icon="el-icon-delete" size="small"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-if="this.formName.total > 0" style="float: right;padding-top: 10px"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page=this.formName.page
                       :page-sizes="[6, 10, 40,100]"
                       :page-size=this.formName.limit
                       layout="total, sizes, prev, pager, next, jumper"
                       :total=this.formName.total>
        </el-pagination>
        <!--新增与修改的 弹出框-->
        <el-dialog :title=dialogTitle :visible.sync="dialogFormVisible" @close='closeDialog'>
            <el-row>
                <el-col>
                    <el-input type="text" id="dRoleName" v-model="dialogForm.roleName"
                              :disabled="dialogForm.roleNameIsDisabled" placeholder="请输入角色名称"
                              @blur="inputBlur('roleName',dialogForm.roleName)">>
                        <template slot="prepend">角色名称</template>
                    </el-input>
                </el-col>
            </el-row>
            <el-row :gutter="10">
                <el-col>
                    <el-input type="text" id="dCode" v-model="dialogForm.code" :disabled="dialogForm.roleNameIsDisabled"
                              placeholder="请输入角色编码"
                              @blur="inputBlur('code',dialogForm.code)">>
                        <template slot="prepend">角色编码</template>
                    </el-input>
                </el-col>
            </el-row>
            <el-row :gutter="10">
                <el-col>
                    <el-input type="text" id="dDescribed" v-model="dialogForm.descpt" placeholder="请输入角色描述"
                              @blur="inputBlur('described',dialogForm.descpt)">
                        <template slot="prepend">角色描述</template>
                    </el-input>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="24">
                    <div class="el-input el-input-group el-input-group--prepend" >
                        <div class="el-input-group__prepend" style="border-right: 1px solid #dcdfe6;">角色权限</div>
                        <el-tree :data="treeData" style="max-height: 200px;overflow: auto;"
                                 node-key="id"
                                 show-checkbox
                                 ref="tree"
                                 :props="defaultProps"
                                 :default-expanded-keys="this.dialogForm.roles"
                                 :default-checked-keys="this.dialogForm.roles"
                                 highlight-current>
                        </el-tree>
                        <!--<input type="text" autocomplete="off" id="dDescribed" placeholder="请输入角色描述" class="el-input__inner">-->
                    </div>
                </el-col>
            </el-row>
            <!--<el-row :gutter="10">-->
                <!--<el-col>-->
                    <!--<el-tree :data="treeData"-->
                             <!--node-key="id"-->
                             <!--show-checkbox-->
                             <!--:props="defaultProps"-->
                             <!--:default-expanded-keys="this.dialogForm.roles"-->
                             <!--:default-checked-keys="this.dialogForm.roles"-->
                             <!--highlight-current>-->
                    <!--</el-tree>-->
                <!--</el-col>-->
            <!--</el-row>-->
            <!--
            <el-row :gutter="10">
                <el-col>
                    <el-checkbox-group v-model="dialogForm.checkList">
                        <el-checkbox v-for="item in dialogCheckboxData" :label="item.id">{{item.roleName}}</el-checkbox>
                    </el-checkbox-group>
                </el-col>
            </el-row>-->
            <el-row :gutter="10">
                <el-col :span="10">
                    <el-button type="primary" @click="dialogSubmitForm">提交</el-button>
                    <el-button @click="dialogResetForm">重置</el-button>
                    <p>{{error.msg}}</p>
                </el-col>
            </el-row>
        </el-dialog>
    </div>
</template>
<script type="text/ecmascript-6">
    export default {
        data() {
            return {
                error: {
                    msg: ''
                },
                formName: {//表单中的参数
                    uname: '',
                    umobile: '',
                    insertTimeStart: '',
                    insertTimeEnd: '',
                    error: "",
                    page: 1,
                    limit: 6,
                    total: ''
                },
                tableData: [],
                dialogTitle:"",
                dialogFormVisible: false,
                dialogForm: {//新增参数
                    id:'',
                    roleName: '',
                    roleNameIsDisabled: false,
                    roleCodeIsDisabled: false,
                    code: '',
                    descpt: '',
                    insertTime:'',
                    roles:[]
                },
                treeData:"",
                defaultProps: {
                    children: "children",
                    label: "label"
                }
            }
        },
        mounted() {
            this.submitForm();
        },
        methods: {
            submitForm: function () {
                var params = "";
                params += "?page=" + this.formName.page;
                params += "&limit=" + this.formName.limit;
                params += "&uname=" + this.formName.uname;
                params += "&umobile=" + this.formName.umobile;
                if (this.formName.insertTimeStart != null) {
                    params += "&insertTimeStart=" + this.formName.insertTimeStart;
                }
                if (this.formName.insertTimeEnd != null) {
                    params += "&insertTimeEnd=" + this.formName.insertTimeEnd;
                }
                this.$axios.get(this.$serverUrl + '/role/getRoles' + params).then((res) => {
                    console.log(res.data.list);
                    this.tableData = res.data.list;
                    this.formName.total = res.data.totals;
                }).catch((res) => {
                    this.$alert(res.response.data.response.msg);
                })
            },
            handleSizeChange: function (val) {
                this.formName.limit = val;
                this.submitForm();
            },
            handleCurrentChange(val) {
                this.formName.page = val;
                this.submitForm();
            },
            // 删除角色
            del:function(row){
                var msg = "是否删除角色[" + row.roleName + "]？";
                this.$confirm(msg, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.doDel(row);
                    this.submitForm();
                }).catch(() => {
                });
            },
            doDel:function(row){
                var params = "";
                params += "?roleId=" + row.id;
                this.$axios.post(this.$serverUrl + '/role/delRole' + params).then((res) => {
                    if (res.data.isSucess){
                        this.$alert(res.data.msg);
                        this.submitForm();// 查询
                    } else{
                        this.$alert(res.data.msg);
                    }

                }).catch((res) => {
                    console.log(res.data);
                })
            },
            //打开编辑权限
            editor: function(row){
                this.dialogTitle = "编辑角色";
                this.dialogForm.id = row.id;
                this.dialogForm.code = row.code;
                this.dialogForm.roleName = row.roleName;
                this.dialogForm.descpt = row.descpt;
                this.dialogForm.roleNameIsDisabled = true;// 是否可编辑
                this.dialogForm.roleCodeIsDisabled = true;// 是否可编辑
                this.dialogFormVisible = true;
                this.dialogForm.insertTime = row.insertTime;
                this.getPermissionByRoleId(row.id);// 获取全部权限以及当前角色的权限
            },
            // 打开新增权限
            openAddRole: function () {
                this.dialogTitle = "新增角色";
                this.dialogFormVisible = true;
                this.getAllPermission();// 获取所有的权限
            },
            // 获取所有的权限
            getAllPermission:function(){
                this.$axios.get(this.$serverUrl + '/role/getAllPermission').then((res) => {
                    this.treeData = res.data;
                }).catch((res) => {
                    this.$alert(res.response.data.response.msg);
                })
            },
            // 根据角色id获取所有权限id
            getPermissionByRoleId:function(id){
                var params = "";
                params += "?roleId=" + id;
                this.$axios.get(this.$serverUrl + '/role/getRolePermiByRoleId' + params).then((res) => {
                    for (var i in res.data.rolePerms) {
                        this.dialogForm.roles.push(res.data.rolePerms[i].permitId);
                    }
                    this.treeData = res.data.dataTrees;
                }).catch((res) => {
                    this.$alert(res.response.data.response.msg);
                });
            },
            dialogSubmitForm:function(){
                // this.dialogForm.id = 12;
                if (this.dialogForm.id) {
                    this.doUpdateRole();
                } else {
                    this.doAddRole();
                }
            },
            doUpdateRole:function(){
                var checkedKeys = this.$refs.tree.getCheckedKeys();
                if (checkedKeys == '') {
                    this.error.msg = "请配置角色权限！！！";
                    return;
                }
                var params = "";
                params += "?permIds=" + this.$refs.tree.getCheckedKeys();
                this.$axios(
                    {
                        contentType: 'application/json',
                        dataType: "json",
                        method: 'post',
                        url: this.$serverUrl + '/role/updateRole' + params,
                        data: this.dialogForm
                    }
                ).then((res) => {
                    if (res.data.isSucess){
                        this.dialogFormVisible = false;
                        this.$alert(res.data.msg);
                        this.submitForm();// 查询
                    } else{
                        this.error.msg = res.data.msg;
                    }
                }).catch((res) => {
                    this.$alert(res.response.data.response.msg);
                });
            },
            doAddRole:function(){
                var checkedKeys = this.$refs.tree.getCheckedKeys();
                if (checkedKeys == '') {
                    this.error.msg = "请配置角色权限！！！";
                    return;
                }
                var params = "";
                params += "?permIds=" + this.$refs.tree.getCheckedKeys();
                this.$axios(
                    {
                        contentType: 'application/json',
                        dataType: "json",
                        method: 'post',
                        url: this.$serverUrl + '/role/addRole' + params,
                        data: this.dialogForm
                    }
                ).then((res) => {
                    if (res.data.isSucess){
                        this.dialogFormVisible = false;
                        this.$alert(res.data.msg);
                        this.submitForm();// 查询
                    } else{
                        this.error.msg = res.data.msg;
                    }
                }).catch((res) => {
                    this.$alert(res.response.data.response.msg);
                });
            },
            clearDialogForm: function () {
                this.dialogForm.id = "";
                this.dialogForm.code = "";
                this.dialogForm.roleName = "";
                this.dialogForm.descpt = "";
                this.dialogForm.roles = [];
                this.dialogForm.roleNameIsDisabled = false;// 是否可编辑
                this.dialogForm.roleCodeIsDisabled = false;// 是否可编辑
                this.error.msg = "";
                this.dialogForm.insertTime = "";
            },
            closeDialog:function(){
                this.clearDialogForm();
            },
            inputBlur: function (errorItem, inputContent) {
                if (errorItem === 'roleName') {
                    if (inputContent === '') {
                        this.error.msg = '角色名称不能为空';
                    } else {
                        this.error.msg = '';
                    }
                } else if (errorItem === 'code') {
                    if (inputContent === '') {
                        this.error.msg = '角色编码不能为空';
                    } else {
                        this.error.msg = '';
                    }
                } else if (errorItem === 'described') {
                    if (inputContent === '') {
                        this.error.msg = '角色描述不能为空';
                    } else {
                        this.error.msg = '';
                    }
                }
            }
        }
    }
</script>
<style scoped>
    .el-row {
        margin-bottom: 20px;
    }

    hr {
        height: 1px;
        margin: 10px 0;
        border: 0;
        background-color: #393D49 !important;
        clear: both;
    }

    p {
        color: red;
        text-align: left;
    }
</style>